<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Hello React</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<div id="app"></div>
<div id="change"></div>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<h1>Hello Root</h1>)
    const app = ReactDOM.createRoot(document.getElementById('app'));
    app.render(<h1>Hello App</h1>)
    const change = ReactDOM.createRoot(document.getElementById('change'));

    let cnt = 0

    function cli() {
        change.render((
            <div>
                <h1>点击了 <span>{cnt}</span>次</h1>
                <button onClick={cli}>点击</button>
            </div>
        ))
        cnt = cnt + 1;
    }

    cli()
</script>
</body>
</html>